<template>
	<view class="content">
		<button @click="onAdd">新增</button>
		
		<unicloud-db v-bind:page-size="3" ref="udb" v-slot:default="{data, loading, error, options}" collection="hm-article" orderby="category desc">
			<<uni-table stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">标题</uni-th>
					<uni-th align="center">内容</uni-th>
					<uni-th align="center">分类</uni-th>
					<uni-th align="center">封面大图</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in data" :key="item._id">
					<uni-td>{{index+1}}</uni-td>
					<uni-td>{{item.title}}</uni-td>
					<uni-td>{{item.content}}</uni-td>
					<uni-td>{{item.category}}</uni-td>
					<uni-td><image :src="item.thumb" width="50" height="50"></image></uni-td>
				</uni-tr>
			</uni-table>			
		</unicloud-db>

	</view>
</template>

<script setup>
	const title="wenqi"
	import {ref} from "vue"
	import {onReachBottom, onPullDownRefresh} from "@dcloudio/uni-app"
	const udb = ref(null);
	const onAdd = async ()=>{
		await udb.value.add(
			{
				title:"udb云开发" + udb.value.dataList.length,
				content:"udb云开发 内容",
				thumb:"https://mp-ab79ae36-3036-4f6c-82c5-b60b73f76776.cdn.bspapp.com/wenqi.jpg",
				category:2
			}
		);
	};
	
	onReachBottom(()=>{
		console.log(11111);
		udb.value.loadMore();
	});
	
	// onPullDownRefresh(()=>{
	// 	udb.value.loadData({clear:true}, ()=>{uni.stopPullDownRefresh()})
	// });
	
	onPullDownRefresh(()=> {
	    // 这里写下拉刷新时要执行的逻辑，比如请求数据等
	    // 数据请求完成后，需要停止下拉刷新动画
		console.log(22222);
	    setTimeout(() => {
	        uni.stopPullDownRefresh(); 
	    }, 2000); 
	});
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
